<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8 />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />

    <script src="./javascript/Leaflet.StyleForms.js"></script>
    <script src="./javascript/Leaflet.StyleEditor.js"></script>
    <link rel="stylesheet" href="./css/Leaflet.StyleEditor.css" />


    <style type="text/css">
    body {
        margin:0;
        padding:0;
    }
    #map {
        position:absolute;
        top:0;
        bottom:0;
        width:100%;
    }
    </style>

</head>

<body>
    <div id="map"></div>
    <script>
    var map = L.map('map').setView([20, -40], 3);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    // initialize the StyleEditor
    map.addControl(L.control.styleEditor({
        position: "topleft"
    }));

    // some random geometries to test (marker, polygon, polyline, geoJSON)
    L.marker([51.5, -0.09]).addTo(map);

    L.polyline([
        [0, 0],
        [30, 30],
        [0, 20]
    ]).addTo(map);

    L.polygon([
        [49, -100],
        [60, -120],
        [70, -90]
    ]).addTo(map);

    L.polygon([
        [-45, 64.92354174306496],
        [-45, 70.61261423801925],
        [-22.148437499999996, 70.61261423801925],
        [-22.148437499999996, 64.92354174306496],
        [-45, 64.92354174306496]
    ]).addTo(map);

	L.geoJson([{
	    "type": "Feature",
	    "properties": {"party": "Republican"},
	    "geometry": {
	        "type": "Polygon",
	        "coordinates": [[
	            [-104.05, 48.99],
	            [-97.22,  48.98],
	            [-96.58,  45.94],
	            [-104.03, 45.94],
	            [-104.05, 48.99]
	        ]]
	    }
	}], {
	    style: function(feature) {
	        switch (feature.properties.party) {
	            case 'Republican': return {color: "#ff0000"};
	        }
	    }
	}).addTo(map);

    var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
        denver = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
        aurora = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
        golden = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');

    var cities = L.layerGroup([littleton, denver, aurora, golden]).addTo(map);

    map.on('styleeditor:changed', function(element){
        console.log(element);
    });
    </script>
</body>

</html>
